
<div class="modal fade" id="modalAddMedia" tabindex="-1" role="dialog" aria-labelledby="modalAddMedia" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <!-- Modal Header -->
         <div class="modal-header">   
            <button type="button" class="close" data-dismiss="modal">
               <span aria-hidden="true">&times;</span>
               <span class="sr-only">关闭</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">
               <i class="fa fa-plus fa-1x"> </i> <i class="fa fa-circle-o"> </i> 上传媒介
            </h4>
         </div>
         
         <!-- Modal Body -->
         <div class="modal-body">
            <form id="modalAddMediaForm" class="form-horizontal form-label-left" method="POST" novalidate>
               <div class="x_panel">
                  <div class="x_content">
                     <input id="id" hidden/>
                     <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="url">网址是 <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                           <input id="url" class="form-control col-md-7 col-xs-12" parsley-trigger="change" parsley-type="url"  name="url" placeholder="http://" required="required" type="text">
                        </div>
                     </div>
                  
                     <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">名称 <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                           <input id="name" class="form-control col-md-7 col-xs-12"  pattern="[-_àèìòùáéíóúñçÀÈÌÒÙÁÉÍÓÚÑÇ .a-zA-Z0-9]+$" data-parsley-length="[4, 60]" name="name" placeholder="Media name" data-parsley-trigger="change" required type="text">
                        </div>
                     </div>
                                          
                     <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="kind">类型 <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-xs-12">
                           <select id="kind" name="kind" class="form-control" required>
                              <option value="">选择..</option>
                              <option value="iso">ISO CD/DVD</option>
                              <option value="floppy">软盘</option>
                              <option value="qcow2">Qcow2</option>
                           </select>
                        </div>
                     </div>

                     <!--<div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Name <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                           <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="4,40" name="name" placeholder="New desktop name" required="required" type="text">
                        </div>
                     </div>-->
                     
                     <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="description">说明
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                           <textarea id="textarea" name="description" class="form-control col-md-7 col-xs-12"></textarea>
                        </div>
                     </div>

                     <input id="hypervisors_pools" name="hypervisors_pools" value="default" hidden/> 
                     <!--<div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="description">Hypervisor Pool
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                           <select class="form-control" id="hypervisors_pools" name="hypervisors_pools">
                              <option value="default" selected="default">
                                 Default
                              </option>
                           </select>
                        </div>
                     </div>-->
                  </div>
               </div>
               <div id="alloweds-add">
                  {% include '/snippets/alloweds_add.html' %}
               </div>
            </form>
         </div>
         <!-- Modal Footer -->
         <div class="modal-footer">
            <ul class="nav navbar-left panel_toolbox">
               <li><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button></li>
            </ul>
            <ul class="nav navbar-right panel_toolbox">
               <li><button id="send" type="button" class="btn btn-success">开始下载</button></li>
            </ul>
         </div>
      </div>
   </div>
</div>

<style>
     [id^=modal_add_] .selected {
        background-color: #e0f1af !important;
    }

    .my-error{
      margin-top: 5px;
      color: #B94A48 !important;
      background-color: #F2DEDE !important;
      border: 1px solid #EED3D7 !important;
      padding: 10px;
    }           
</style>

<div class="modal fade" id="modalAddFromMedia" tabindex="-1" role="dialog" aria-labelledby="modalAddFromMedia" aria-hidden="true" >
   <div class="modal-dialog modal-lg" >
      <div class="modal-content">
         <!-- Modal Header -->
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
               <span aria-hidden="true">&times;</span>
               <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">
               <i class="fa fa-plus fa-1x"> </i> <i class="fa fa-circle-o"> </i> 从媒介创建桌面
            </h4>
         </div>
         <!-- Modal Body -->
         <div class="modal-body">
            <form id="modalAdd" class="" data-parsley-validate>
               <div class="row">
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div id="modalMedia" class="x_panel">
                        <div class="x_title">
                           <h4><i class="fa fa-circle-o" aria-hidden="true"></i> 选择从 ISO/硬盘 启动</h4>
                           <div class="clearfix"></div>
                       </div>
                        <div id="datatables-media-error-status"></div>
                        <input  id="media" name="media" type="hidden" required>
                        <input  id="kind" name="kind" type="hidden" required>
                        <b><label  id="media_name" name="media_name"></label></b>
                        <i>(<label  id="media_size" name="media_size"></label>)</i>
 
                        <!--<div class="item form-group">
                              <label class="control-label col-md-3 col-sm-3 col-xs-12" for="add_virtio_iso">Windows install?
                              </label>
                              <div class="col-md-6 col-sm-6 col-xs-12">
                                 <div class="checkbox">
                                    <label class="">
                                    <div class="icheckbox_flat-green" style="position: relative;">
                                       <input type="checkbox" id="add_virtio_iso" name="add_virtio_iso" class="flat"  style="position: absolute; opacity: 0;">
                                       <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
                                       </ins>
                                    </div> It is a Windows install media
                                    </label>
                                 </div> 
                              </div>
                              <div class="col-md-6 col-sm-6 col-xs-12">
                                 <div class="checkbox">
                                    <label class="">
                                    <div class="icheckbox_flat-green" style="position: relative;">
                                       <input type="checkbox" id="add_virtio_fd" name="add_virtio_fd" class="flat"  style="position: absolute; opacity: 0;">
                                       <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
                                       </ins>
                                    </div> Attach Windows drivers
                                    </label>
                                 </div> 
									   </div>
                              <table id="modal_add_media" class="table table-striped " cellspacing="0" width="100%"  style="margin-top: 0px;">
                                 <thead>
                                    <tr>
                                       <th>Name</th>
                                    </tr>
                                 </thead>
                                 <tbody>
                                 </tbody>
                              </table>
                           </div>-->
                     </div>
                  </div>
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div id="modalData" class="x_panel" >
                        <div class="x_title">
                           <h4><i class="fa fa-info-circle" aria-hidden="true"></i> 桌面名称和说明</h4>
                           <div class="clearfix"></div>
                       </div>
                        <div class="x_content">
                           <label for="name">名称<span class="required"> *</span></label>
                           <input type="text" id="name" class="form-control" name="name" pattern="[-_àèìòùáéíóúñçÀÈÌÒÙÁÉÍÓÚÑÇ .a-zA-Z0-9]+$" data-parsley-length="[4, 40]" name="name" placeholder="New desktop name" data-parsley-trigger="change" required />
                           <label for="message">说明</label>
                           <textarea id="description" class="form-control" name="description"></textarea>                              
                        </div>
                     </div>
                     <div class="x_panel">
                        <div class="x_title">
                           <h4><i class="fa fa-gear" aria-hidden="true"></i> 调整系统硬件模板</h4>
                           <div class="clearfix"></div>
                       </div>
                        <div class="x_content">
                           {% include '/snippets/domain_hardware_disksize_edit.html' %}
                        </div>
                     </div>
                     <div id="modalInstall" class="x_panel">
                        <div class="x_title">
                           <h4>选择系统硬件模板</h4>
                           <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                           <div id="datatables-install-error-status"></div>
                           <input  id="install" name="install" type="hidden" required>
                           <table id="modal_add_install" class="table table-hover" cellspacing="0" width="100%"  style="margin-top: 0px;">
                              <thead>
                                    <tr>
                                    <th>名称</th>
                                    <th>版本</th>
                                    </tr>
                              </thead>
                              <tbody>
                              </tbody>
                           </table>
                        </div>
                     </div>
                  </div>
               </div>
            </form>
         </div>
         <!-- Modal Footer -->
         <div class="modal-footer">
               <ul class="nav navbar-left panel_toolbox">
                  <li><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button></li>
               </ul>
               <ul class="nav navbar-right panel_toolbox">
                  <li><button id="send" type="button" class="btn btn-success">创建桌面</button></li>
               </ul>
         </div>
      </div>
   </div>
</div>
<div class="modal fade" id="modalDeleteMedia" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
       <div class="modal-content">
           <!-- Modal Header -->
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">
                   <span aria-hidden="true">&times;</span>删除媒体
                   <span class="sr-only">关闭</span>
               </button>
               <h4 class="modal-title">
                   <i class="fa fa-delete fa-1x"> </i> <i class="fa fa-user"> </i>   删除媒体
               </h4>
           </div>

           <!-- Modal Body -->
           <div class="modal-body">

               <form id="modalDeleteMediaForm" class="form-horizontal form-label-left">
                   <input id="id" hidden/>
                   <div class="x_panel">
                       <div class="x_content">
                           <h4 style="color: red"><i class="fa fa-warning"> </i> 此介质将从这些桌面中移出。所有这些都将在运行时停止</h4>
                           <div class="item form-media">
                               <table id="table_modal_media_delete" class="table">
                                   <thead>
                                     <tr>
                                       <th>类别</th>
                                       <th>所有者/ID</th>
                                       <th>名称</th>
                                     </tr>
                                   </thead>
             
                                   <tbody>
                                   </tbody>
                                 </table>
                           </div>
                       </div>
                   </div>

               </form>
           </div>
           <!-- Modal Footer -->
           <div class="modal-footer">
               <ul class="nav navbar-left panel_toolbox">
                   <li><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button></li>
               </ul>
               <ul class="nav navbar-right panel_toolbox">
                   <li><button id="send" type="button" class="btn btn-danger">删除媒体</button></li>
               </ul>
           </div>
       </div>
   </div>
</div>